<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
        <title>document获取页面元素的方法</title>
        <script>
            function count(){
                //document对象最常用的三种方法
                var userName = document.getElementById("userName"); //返回单个页面对象
                var hobby = document.getElementsByName("hobby");  //返回一个对象的数组
                var inputs = document.getElementsByTagNsme("input"); //通过标签获取一个对象数组
                
                alert("用户名:"+userName.value);

                var hobbys="爱好: ";

               //完成爱好的拼接
                for(var i=0;i<hobby.length;i++){
                    if(hobby[i].checked){
                        hobbys += hobby[i].value+' ';

                    }
                }
                alert(hobbys);

                alert("一共有"+input.length+"个input标签")
            }
        </script>
   </head>
   <body>
       <form>
           用户名:<input type="text" name="username" id="userName"/><br/><br/>
           爱好:
                 <input type="checkbox" name="hobby" value="听音乐"/>听音乐
                 <input type="checkbox" name="hobby" value="足球"/>足球
                 <input type="checkbox" name="hobby" value="旅游"/>旅游<br/><br/>
                 <input type="button" value="统计结果" onclick="count()"/>

       </form>
   </body>
</html>